<template>
    <div class="rdimore">
        <TitleBar :title="title" :hasTabs="hasTabs" :titleType="titleType" :isTitleDot="isTitleDot" :isMore="isMore" />
        <ul class="rdilist clear-block">
            <li v-for="(item,index) in itemList" key="index">
                <a href="djradio?id=" class="cvr u-cover u-cover-rdi f-fl">
                    <img :src="item.imgUrl" :alt="item.name">
                </a>
                <div class="cnt">
                    <h3 class="f-fs3">
                        <a :href="item.nameRoute" class="s-fc1" title="radio-name">{{item.name}}</a>
                    </h3>
                    <p class="note s-fc4">{{item.desc}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script setup>
import TitleBar from '@/components/TitleBar.vue';
defineProps({
        "title": String,
		"hasTabs": Boolean,
		"titleType": Number,
		"isTitleDot": Boolean,
		"isMore": Boolean,
        "itemList":Array
})
</script>
<style lang="scss" scoped>
.rdimore {

    margin-top: 35px;
    .rdilist {
        margin-left: -30px;

        li {
            float: left;
            width: 435px;
            height: 120px;
            margin-left: 30px;
            padding: 20px 0;
            border-bottom: 1px solid #e7e7e7;

            .cvr {
                margin-right: -200px;
            }

            .u-cover-rdi {
                width: 120px;
                height: 120px;
            }

            .u-cover {
                position: relative;
                display: block;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }

            .cnt {
                margin-left: 140px;

                h3 {
                    margin: 16px 0 20px;
                }

                .note {
                    margin-bottom: 6px;
                    line-height: 20px;
                }
            }
        }
    }
}
</style>